<template>
    <div class="f-c" :style="{width: width}">
        <el-cascader
            v-model="value1"
            :options="options1"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChangeStart"
        />
        <span class="ph6">至</span>
        <el-cascader
            v-model="value2"
            :options="options2"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChangeEnd"
        />
    </div>
</template>

<script setup lang="ts">
    import { PropType, ref, watch } from "vue";

    const props = defineProps({
        modelValue: {
            type: Array as PropType<string[]>,
            default: () => {
                return []
            }
        },
        width: {
            type: String,
            default: '230px'
        }
    })

    const emit = defineEmits(['update:modelValue', 'change']);

    let value1 = ref<string[]>([]);
    let value2 = ref<string[]>([]);
    const options1 = ref<ObjValueAny[]>([]);
    const options2 = ref<ObjValueAny[]>([]);

    for (let i = 1; i < 13; i++) {
        const optionRow: ObjValueAny = {
            value: i.toString().padStart(2, '0'),
            label: `${i}月`,
            children: [],
        }
        const days: number = new Date(2016, i, 0).getDate();
        for (let j = 1; j < days + 1; j++) {
            optionRow.children.push({
                value: j.toString().padStart(2, '0'),
                label: `${j}日`,
            })
        }
        options1.value.push(JSON.parse(JSON.stringify(optionRow)));
        options2.value.push(JSON.parse(JSON.stringify(optionRow)));
    }

    // 选择开始日期
    const handleChangeStart = (event: string[]) => {
        disabledEnd(event);
        changeValue();
    }
    // 禁用结束日期 （小于开始时间部分）
    const disabledEnd = (event: string[]) => {
        let disIndex: number = -1;
        for (let i = 0; i < options2.value.length; i++) {
            const row = options2.value[i];
            row.disabled = +row.value < +event[0];
            if (row.disabled) {
                disIndex = i + 1;
            }
            for (let j = 0; j < row.children.length; j++) {
                if (i === disIndex) {
                    row.children[j].disabled = +row.children[j].value < +event[1];
                } else {
                    row.children[j].disabled = !!row.disabled;
                }
            }
        }
    }

    // 选择结束日期
    const handleChangeEnd = (event: string[]) => {
        disabledStart(event);
        changeValue();
    }
    // 禁用开始日期 （大于结束时间部分）
    const disabledStart = (event: string[]) => {
        let disIndex: number = -1;
        for (let i = options1.value.length - 1; i >= 0; i--) {
            const row = options1.value[i];
            row.disabled = +row.value > +event[0];
            if (row.disabled) {
                disIndex = i - 1;
            }
            for (let j = row.children.length - 1; j >= 0; j--) {
                if (i === disIndex) {
                    row.children[j].disabled = +row.children[j].value > +event[1];
                } else {
                    row.children[j].disabled = !!row.disabled;
                }
            }
        }
        // for (let i = 0; i < options1.value.length; i++) {
        //
        //     for (let j = 0; j < row.children.length; j++) {
        //         row.children[j].disabled = +row.children[j].value > +event[1];
        //     }
        // }
    }

    const changeValue = () => {
        watchDeepStatus = false;
        const value: string[] = [value1.value.join('-'), value2.value.join('-')];
        emit('update:modelValue', value);
        emit('change', value);
    }

    let watchDeepStatus: boolean = true;
    watch(() => props.modelValue, (newValue: string[]) => {
        if (watchDeepStatus && newValue.length) {
            value1.value = newValue[0].split('-');
            value2.value = newValue[1].split('-');
            disabledEnd(value1.value);
            disabledStart(value2.value);
        }
    }, {
        immediate: true
    });
</script>